<script lang="ts" setup>
import type { Mail } from '../data/mails';

import { refDebounced } from '@vueuse/core';
import {
  Search,
} from 'lucide-vue-next';
import { computed, ref } from 'vue';
import { cn } from '@/lib/utils';
import { Input } from '@/components/ui/input';
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from '@/components/ui/resizable';
import { Separator } from '@/components/ui/separator';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '@/components/ui/tabs';
import { TooltipProvider } from '@/components/ui/tooltip';
import AccountSwitcher from './AccountSwitcher.vue';
import MailDisplay from './MailDisplay.vue';
import MailList from './MailList.vue';
import Nav from './Nav.vue';
import type { LinkProp } from './Nav.vue';

interface MailProps {
  accounts: Array<{
    label: string;
    email: string;
    icon: string;
  }>;
  mails: Mail[];
  defaultLayout?: number[];
  defaultCollapsed?: boolean;
  navCollapsedSize: number;
}

const props = withDefaults(defineProps<MailProps>(), {
  defaultCollapsed: false,
  defaultLayout: () => [265, 440, 655],
});

const isCollapsed = ref(props.defaultCollapsed);
const firstMail = props.mails[0];
const selectedMail = ref<string | undefined>(firstMail ? firstMail.id : undefined);
const searchValue = ref('');
const debouncedSearch = refDebounced(searchValue, 250);

const filteredMailList = computed(() => {
  let output: Mail[] = [];
  const searchValue = debouncedSearch.value?.trim();
  if (!searchValue) {
    output = props.mails;
  } else {
    output = props.mails.filter(item => {
      return item.name.includes(debouncedSearch.value)
        || item.email.includes(debouncedSearch.value)
        || item.name.includes(debouncedSearch.value)
        || item.subject.includes(debouncedSearch.value)
        || item.text.includes(debouncedSearch.value);
    });
  }

  return output;
});

const unreadMailList = computed(() => filteredMailList.value.filter(item => !item.read));

const selectedMailData = computed(() => props.mails.find(item => item.id === selectedMail.value));

const links: LinkProp[] = [
  {
    title: '收件箱',
    label: '128',
    icon: 'lucide:inbox',
    variant: 'default',
  },
  {
    title: '草稿',
    label: '9',
    icon: 'lucide:file',
    variant: 'ghost',
  },
  {
    title: '已发送',
    label: '',
    icon: 'lucide:send',
    variant: 'ghost',
  },
  {
    title: '垃圾邮件',
    label: '23',
    icon: 'lucide:archive',
    variant: 'ghost',
  },
  {
    title: '回收站',
    label: '',
    icon: 'lucide:trash',
    variant: 'ghost',
  },
  {
    title: '归档',
    label: '',
    icon: 'lucide:archive',
    variant: 'ghost',
  },
];

const links2: LinkProp[] = [
  {
    title: '社交',
    label: '972',
    icon: 'lucide:user-2',
    variant: 'ghost',
  },
  {
    title: '更新',
    label: '342',
    icon: 'lucide:alert-circle',
    variant: 'ghost',
  },
  {
    title: '论坛',
    label: '128',
    icon: 'lucide:message-square',
    variant: 'ghost',
  },
  {
    title: '购物',
    label: '8',
    icon: 'lucide:shopping-cart',
    variant: 'ghost',
  },
  {
    title: '推广',
    label: '21',
    icon: 'lucide:archive',
    variant: 'ghost',
  },
];

function onCollapse() {
  isCollapsed.value = true;
}

function onExpand() {
  isCollapsed.value = false;
}
</script>

<template>
  <TooltipProvider :delay-duration="0">
    <ResizablePanelGroup
      id="resize-panel-group-1"
      direction="horizontal"
      class="h-full items-stretch"
    >
      <ResizablePanel
        id="resize-panel-1"
        :default-size="defaultLayout[0]"
        :collapsed-size="navCollapsedSize"
        collapsible
        :min-size="15"
        :max-size="20"
        :class="cn(isCollapsed && 'min-w-[50px] transition-all duration-300 ease-in-out')"
        @expand="onExpand"
        @collapse="onCollapse"
      >
        <div :class="cn('flex h-[52px] items-center justify-center', isCollapsed ? 'h-[52px]' : 'px-2')">
          <AccountSwitcher :is-collapsed="isCollapsed" :accounts="accounts" />
        </div>
        <Separator />
        <Nav
          :is-collapsed="isCollapsed"
          :links="links"
        />
        <Separator />
        <Nav
          :is-collapsed="isCollapsed"
          :links="links2"
        />
      </ResizablePanel>
      <ResizableHandle id="resize-handle-1" with-handle />
      <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]" :min-size="30">
        <Tabs default-value="all">
          <div class="flex items-center px-4 py-2">
            <h1 class="text-xl font-bold">
              收件箱
            </h1>
            <TabsList class="ml-auto">
              <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">
                所有邮件
              </TabsTrigger>
              <TabsTrigger value="unread" class="text-zinc-600 dark:text-zinc-200">
                未读
              </TabsTrigger>
            </TabsList>
          </div>
          <Separator />
          <div class="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
            <form>
              <div class="relative">
                <Search class="absolute left-2 top-2.5 size-4 text-muted-foreground" />
                <Input v-model="searchValue" placeholder="搜索" class="pl-8" />
              </div>
            </form>
          </div>
          <TabsContent value="all" class="m-0">
            <MailList v-model:selected-mail="selectedMail" :items="filteredMailList" />
          </TabsContent>
          <TabsContent value="unread" class="m-0">
            <MailList v-model:selected-mail="selectedMail" :items="unreadMailList" />
          </TabsContent>
        </Tabs>
      </ResizablePanel>
      <ResizableHandle id="resiz-handle-2" with-handle />
      <ResizablePanel id="resize-panel-3" :default-size="defaultLayout[2]">
        <MailDisplay :mail="selectedMailData" />
      </ResizablePanel>
    </ResizablePanelGroup>
  </TooltipProvider>
</template>
